<template>
  <div style="margin-top: 50px">
    <el-form :model="value" ref="questionAttrFormRef" :rules="questionAttrRule" label-width="120px" style="width: 720px" size="small">
      <el-form-item label="题干：" prop="question">
          <tinymce :width="595" :height="300" v-model="value.question"></tinymce>
        
      </el-form-item>
      <el-form-item label="答案及解析：" prop="answer">
          <tinymce :width="595" :height="300" v-model="value.answer"></tinymce>
        
      </el-form-item>
      <el-form-item style="text-align: center">
        <el-button size="medium" @click="handlePrev">上一步，填写试题信息</el-button>
        <el-button type="primary" :disabled="isDisabled"size="medium" @click="handleFinishCommit('questionAttrFormRef')">完成，提交试题</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  
  import SingleUpload from '@/components/Upload/singleUpload'
  import MultiUpload from '@/components/Upload/multiUpload'
  import Tinymce from '@/components/Tinymce'

  export default {
    name: "QuestionAttrDetail",
    components: {SingleUpload, MultiUpload, Tinymce},

    props: {
      value: Object,
      isEdit: {
        type: Boolean,
        default: false
      },
      isDisabled:{
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        questionAttrRule:{
          question: [{required: true, message: '请输入题干', trigger: 'blur'}],
          answer: [{required: true, message: '请选输入答案及解析', trigger: 'blur'}], 
          
        },
      }
    },
    computed: {
      
    },
    created() {
      
    },
    watch: {
      
    },
    methods: {
      handlePrev(){
        this.$emit('prevStep')
      },
      handleFinishCommit(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {

              this.$emit('finishCommit',this.isEdit);
          }else{
            this.$message({
              message: '验证失败',
              type: 'error',
              duration:1000
            });
            return false;
          }
        })
      }, 
     
    }
  }
</script>

<style scoped>
 
</style>
